<template>
	<!-- 论坛 -->
	<view class="lt-list">
		<view class="lt-content" :class="idmypublish?'lt-content-idmypublish':''">
			<view v-if="!idmypublish" class="row" v-for="(lt, index) in filteredLtData" :key="index"
				:data-guid="lt.guid">
				<view class="top">
					<view class="left" v-if="lt.member && lt.member.avatar">
						<view class="head" @click="toPage(lt.member)">
							<image class="profilephoto" :src="lt.member?lt.member.avatar:lt.avatar" mode="widthFix">
							</image>
							<!-- VIP -->
							<image class="vip" v-if="lt.member && (lt.member.authStatus == '1' || lt.member.authStatus == '2') || lt.authStatus == '1' || lt.authStatus == '2'"
								src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_vip.png"
								mode="widthFix"></image>
						</view>
						<view class="head-right">
							<view class="name">{{ lt.member ? lt.member.realName : '' }}</view>
							<view class="zt">{{ lt.title }}</view>
							<view class="main" :class="isLtList?'main-list':''">
								<text>{{ lt.ltInfo }}</text>
							</view>
						</view>

					</view>
				</view>

				<view class="bottom">
					<view class="tag">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_bq.png"
							mode="widthFix"></image>{{ lt.releaseLabel }}
					</view>
					<view class="right">
						<view class="block" @click="handleLike(lt)">
							<uni-icons type="hand-up-filled" size="20"
								:color="isUserLiked(lt) ? '#AC6C17' : '#333'"></uni-icons>
							<text
								:class="{'active': isUserLiked(lt)}">{{ lt.memberReleaseDzList ? lt.memberReleaseDzList.length : 0 }}</text>
						</view>
						<view class="block" @click="showCommentPopup(lt)">
							<uni-icons type="chat" size="20"
								:color="isUserCommented(lt) ? '#AC6C17' : '#333'"></uni-icons>
							<text
								:class="{'active': isUserCommented(lt)}">{{lt.memberReleaseCommentList ? lt.memberReleaseCommentList.length : 0}}</text>
						</view>
					</view>

				</view>
			</view>

			<view v-if="idmypublish" class="row" v-for="(lt, index) in ltData" :key="index" :data-guid="lt.guid">
				<view class="row-tag-title">
					<view class="row-tag-title-left"><uni-icons type="star-filled" size="16"
							color="#AC6C17"></uni-icons>论坛
					</view>
					<!-- <view v-if="lt.releaseStatus" class="row-tag-title-right" :class="lt.releaseStatus === '审核中'?'audit-status-dsh'
					:lt.releaseStatus == '已通过'?'audit-status-ytg':'audit-status-wtg'">{{ lt.releaseStatus }}</view> -->
				</view>
				<!-- <view v-if="lt.releaseStatus" class="row-tag-title-right" :class="lt.releaseStatus === '审核中'?'audit-status-dsh'
				:lt.releaseStatus == '已通过'?'audit-status-ytg':'audit-status-wtg'">{{ lt.releaseStatus }}</view> -->

				<view class="row-text">
					<text>主题：</text>
					<text>{{ lt.title }}</text>
				</view>

				<view class="row-text">
					<text>内容：</text>
					<text>{{ lt.ltInfo }}</text>
				</view>
				<view class="sxcp">
					<view class="sxcp-left">标签：</view>
					<view class="sxcp-right">
						<view class="sxcp-block">{{ lt.releaseLabel }}
							<!-- <uni-icons :type="arrowIcon" size="11" color="#2353F2"></uni-icons> -->
						</view>
					</view>
				</view>
				<view v-if="idmypublish && lt.releaseStatus === '驳回'" class="row-text">
					<text>驳回说明：</text>
					<text>{{ lt.releaseCheckIdea }}</text>
				</view>
				<!-- 编辑、删除 -->
				<view class="row-edit-del" style="margin-bottom: 0;">
					<view v-if="lt.releaseStatus !== '展示中'" class="block-btn" @click="editClick(lt)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_bj.png"
							mode="widthFix"></image> 编辑
					</view>
					<view class="block-btn" @click="delClick(lt)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_sc.png"
							mode="widthFix"></image> 删除
					</view>
				</view>
			</view>
		</view>
		<!-- 评论弹出层 -->
		<uni-popup ref="commentPopup" type="bottom" @change="handlePopupChange">
			<view class="comment-popup" :class="{'empty-list': !currentComments.length}"
				:style="{ height: commentPopupHeight + 'px' }">
				<!-- 评论列表区域 -->
				<scroll-view v-if="currentComments.length > 0" scroll-y class="comment-list"
					:style="{ height: scrollViewHeight + 'px' }" :scroll-top="scrollTop" @scroll="handleScroll">
					<view class="comment-item" v-for="(item, index) in currentComments" :key="index">
						<image class="avatar" :src="(item.member && item.member.avatar) || '/static/images/head_default.png'"
							mode="aspectFill" @click="toPage(item.member)"></image>
						<view class="content-wrap">
							<view class="user-info">
								<text class="name">{{(item.member && item.member.realName) || '-'}}</text>
								<text class="time">{{formatTime(item.createTime)}}</text>
							</view>
							<view class="content1">{{item.commentInfo}}</view>
						</view>
					</view>
				</scroll-view>

				<!-- 评论输入区域 -->
				<view class="comment-input-wrap" :style="{ bottom: keyboardHeight + 'px' }">
					<textarea v-model="commentContent" class="comment-input" placeholder="请输入评论内容"
						:adjust-position="false" :cursor-spacing="20" :show-confirm-bar="false" :hold-keyboard="true"
						@focus="handleInputFocus" @blur="handleInputBlur"
						@keyboardheightchange="onKeyboardHeightChange">
					</textarea>
					<button class="submit-btn" :class="isltIndex?'submit-btn1':''" @click="submitComment">发表评论</button>
				</view>
			</view>
		</uni-popup>
	</view>


</template>

<script>
	import {
		parseDate
	} from '@/utils/date.js';

	export default {
		name: "LunTan",
		data() {
			return {
				commentContent: '',
				currentItem: null,
				currentComments: [],
				isPopupShow: false,
				scrollIntoView: '',
				// 添加搜索和筛选相关的数据
				searchQuery: '', // 搜索内容
				selectedFilter: '全部', // 下拉筛选默认全部
				arrowIcon: 'down', // 下拉筛选箭头
				popupValue: [0], // 下拉框默认选中第一个
				isFocus: false, // 是否聚焦
				pupItemData: [], // 筛选选项数据
				originalLtData: [], // 保存原始数据
				filteredLtData: [], // 筛选后的数据
				// 添加弹窗高度相关数据
				commentPopupHeight: 0,
				scrollViewHeight: 400, // 滚动区域默认高度
				inputFocus: false, // 输入框焦点状态
				keyboardHeight: 0,
				scrollTop: 0,
				lastScrollTop: 0,
				isIOS: uni.getSystemInfoSync().platform === 'ios',
				systemInfo: null,
				pageScrollTop: 0, // 添加记录页面滚动位置的变量
			};
		},
		props: {
			ltguid: {
				type: String,
				default: ''
			},
			ltData: {
				type: Array,
				default: () => []
			},
			// 判断是否是列表进入的
			isLtList: {
				type: Boolean,
				default: false
			},
			// 判断是否是我发布的
			idmypublish: {
				type: Boolean,
				debugger: false
			},
			// 判断是首页进入
			isltIndex: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			// 监听ltData变化
			ltData: {
				handler(newVal) {
					// 检查数据是否存在且为数组
					if (!newVal || !Array.isArray(newVal)) {
						this.originalLtData = [];
						this.filteredLtData = [];
						return;
					}

					// 对数据进行时间排序（最新的在前面）
					const sortedData = [...newVal].sort((a, b) => {
						// 检查createTime是否存在
						if (!a.createTime || !b.createTime) return 0;
						
						const timeA = parseDate(a.createTime).getTime();
						const timeB = parseDate(b.createTime).getTime();
						
						// 检查时间是否有效
						if (isNaN(timeA) || isNaN(timeB)) return 0;
						
						return timeB - timeA; // 降序排列，最新的在前
					});

					this.originalLtData = sortedData;
					this.filteredLtData = sortedData;
				},
				immediate: true
			},
			// 监听ltguid变化
			ltguid: {
				handler(newVal) {
					if (newVal) {
						this.$nextTick(() => {
							const targetItem = this.ltData.find(item => item.guid === newVal);
							if (targetItem) {
								// 先触发评论弹窗
								this.showCommentPopup(targetItem);

								// 延迟执行滚动，确保页面渲染完成
								setTimeout(() => {
									const query = wx.createSelectorQuery().in(this);
									// 1. 获取所有 .row 元素的位置信息
									query.selectAll('.row').boundingClientRect(rects => {
										console.log('所有row元素：', rects);
										if (rects && rects.length) {
											// 2. 通过 data-guid 找到目标元素的索引
											const targetIndex = rects.findIndex(rect =>
												rect.dataset && rect.dataset.guid === newVal
											);
											console.log('目标索引：', targetIndex);

											if (targetIndex > -1) {
												// 3. 计算目标元素之前所有元素的高度总和
												let scrollTop = 0;
												for (let i = 0; i < targetIndex; i++) {
													scrollTop += rects[i].height;
												}
												console.log('计算得到的滚动位置：', scrollTop);

												// 执行滚动
												wx.pageScrollTo({
													scrollTop: scrollTop,
													duration: 300,
													success: () => {
														console.log('滚动成功到位置：',
															scrollTop);
													},
													fail: (err) => {
														console.log('滚动失败：', err);
													}
												});
											}
										}
									}).exec();
								}, 500); // 给足够的时间等待页面渲染
							}
						});
					}
				},
				immediate: true
			}
		},
		created() {
			// 获取系统信息
			this.systemInfo = uni.getSystemInfoSync();
		},
		methods: {
			toPage(item) {
				// 检查item是否存在
				if (!item || !item.guid) {
					uni.showToast({
						title: '用户信息不存在',
						icon: 'none'
					});
					return;
				}

				// 检查登录状态
				if (!this.$store.state.user.isLoggedIn) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					// 跳转到登录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}, 1500);
					return;
				}
				uni.navigateTo({
					url: `/pages/my-card/my-card?id=${item.guid}`
				})
			},
			// 编辑
			editClick(i) {
				this.$emit('on-edit', i);
			},
			// 删除
			delClick(i) {
				this.$emit('on-delete', i, '论坛');
			},
			// 处理点赞
			async handleLike(item) {
				// 检查登录状态
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					// 跳转到登录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}, 1500);
					return;
				}

				const data = {
					releaseId: item.guid,
					dzUserId: this.$store.state.user.userInfo.guid
				};

				try {
					let res;
					if (this.isUserLiked(item)) {
						res = await this.$api.deleteReleaseDz(data);
					} else {
						res = await this.$api.getReleaseDz(data);
					}

					if (res.succ) {
						// 更新点赞状态和数量
						// const currentUserId = this.$store.state.user.userInfo.guid;
						// if(this.isUserLiked(item)) {
						// 	// 取消点赞,从数组中移除
						// 	const index = item.memberReleaseDzList.findIndex(dz => dz.dzUserId === currentUserId);
						// 	if(index > -1) {
						// 		item.memberReleaseDzList.splice(index, 1);
						// 	}
						// } else {
						// 	// 添加点赞,向数组添加记录
						// 	item.memberReleaseDzList.push({
						// 		dzUserId: currentUserId
						// 	});
						// }

						uni.showToast({
							title: this.isUserLiked(item) ? '取消点赞成功' : '点赞成功',
							icon: 'success'
						});

						this.$emit('refresh');
					}
				} catch (e) {
					uni.showToast({
						title: '操作失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 判断用户是否点赞
			isUserLiked(item) {
				if (!item.memberReleaseDzList) return false;
				// 检查用户是否登录
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) return false;
				return item.memberReleaseDzList.some(dz => dz.dzUserId === this.$store.state.user.userInfo.guid);
			},
			// 判断用户是否评论
			isUserCommented(item) {
				if (!item.memberReleaseCommentList) return false;
				// 检查用户是否登录
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) return false;
				return item.memberReleaseCommentList.some(comment => comment.createUserId === this.$store.state
					.userInfo.guid);
			},
			// 显示评论弹窗
			async showCommentPopup(item) {
				// 检查登录状态
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					// 跳转到登录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}, 1500);
					return;
				}

				// 获取当前页面滚动位置
				uni.createSelectorQuery().in(this).select('.lt-content').boundingClientRect(data => {
					if (data) {
						// 记录滚动位置并禁止滚动
						this.pageScrollTop = Math.abs(data.top);
						this.isPopupShow = true;

						// 处理评论加载和弹窗显示
						this.currentItem = item;
						this.loadComments(item.guid).then(() => {
							const windowHeight = this.systemInfo.windowHeight;
							if (this.currentComments.length > 0) {
								this.commentPopupHeight = windowHeight * 0.8;
								this.scrollViewHeight = this.commentPopupHeight - 220;
							} else {
								this.commentPopupHeight = 280;
								this.scrollViewHeight = 0;
							}

							this.$nextTick(() => {
								this.$refs.commentPopup.open();
							});
						});
					}
				}).exec();
			},
			// 处理弹出层状态变化
			handlePopupChange(e) {
				this.isPopupShow = e.show;
				if (!e.show) {
					// 恢复页面滚动
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: this.pageScrollTop,
							duration: 0
						});
						this.pageScrollTop = 0;
					}, 100);

					// 重置状态
					this.keyboardHeight = 0;
					this.commentPopupHeight = 0;
					this.scrollViewHeight = 0;
				}
			},
			// 加载评论列表
			async loadComments(releaseId) {
				const data = {
					releaseId
				};
				const res = await this.$api.getReleaseCommentInfo(data);
				if (res.succ && res.data) {
					// 对评论列表按时间排序（最新的在前面）
					this.currentComments = res.data.sort((a, b) => {
						// 检查createTime是否存在
						if (!a.createTime || !b.createTime) return 0;
						
						const timeA = parseDate(a.createTime).getTime();
						const timeB = parseDate(b.createTime).getTime();
						
						// 检查时间是否有效
						if (isNaN(timeA) || isNaN(timeB)) return 0;
						
						return timeB - timeA; // 降序排列，最新的在前
					});
					this.currentItem.commentCount = res.data.length;
					// 更新评论列表
					this.currentItem.memberReleaseCommentList = this.currentComments;
					// this.initMessage() // 创建消息
				} else {
					this.currentComments = [];
					if (this.currentItem) {
						this.currentItem.commentCount = 0;
						this.currentItem.memberReleaseCommentList = [];
					}
				}
			},
			// 提交评论
			async submitComment() {
				// 检查登录状态
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}

				if (!this.commentContent.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return;
				}

				const data = {
					releaseId: this.currentItem.guid,
					commentInfo: this.commentContent,
					createUserId: this.$store.state.user.userInfo.guid
				};

				const res = await this.$api.getReleaseComment(data);
				if (res.succ) {
					// 评论成功后创建消息
					await this.initMessage();
					await this.loadComments(this.currentItem.guid);

					this.commentContent = '';
					this.closeCommentPopup();

					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});

					this.$emit('refresh');
				}
			},
			// 创建消息
			async initMessage() {
				// 检查登录状态
				if (!this.$store.state.user.userInfo || !this.$store.state.user.userInfo.guid) {
					return;
				}

				// 检查currentItem和member是否存在
				if (!this.currentItem || !this.currentItem.member || !this.currentItem.member.guid) {
					return;
				}

				let msgCn = '用户' + this.$store.state.user.userInfo.realName + '评论了你';
				const data = {
					createUserId: this.$store.state.user.userInfo.guid, // 消息创建者用户id
					msgUserId: this.currentItem.member.guid, // 消息接收者用户id
					msgType: "1", // 消息类型 0:关注 1:评论
					msgCn: msgCn, // 消息内容
					msgJumpId: this.currentItem.guid, // 消息跳转id:关注就是消息创建者id,评论就是文章id
					createUserName: this.$store.state.user.userInfo.realName // 消息创建者用户姓名
				}
				const res = await this.$api.getMsgCreate(data);
				console.log('res', res);
			},
			// 关闭评论弹窗
			closeCommentPopup() {
				if (this.$refs.commentPopup) {
					this.$refs.commentPopup.close();
				}
			},
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';

				const date = parseDate(timeStr);
				if (isNaN(date.getTime())) return '';

				const now = new Date();
				const diff = now - date;

				// 小于1分钟
				if (diff < 60 * 1000) {
					return '刚刚';
				}
				// 小于1小时
				if (diff < 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 1000)) + '分钟前';
				}
				// 小于24小时
				if (diff < 24 * 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
				}
				// 小于30天
				if (diff < 30 * 24 * 60 * 60 * 1000) {
					return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前';
				}

				// 超过30天，显示具体日期
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 处理输入框获得焦点
			handleInputFocus() {
				if (!this.isIOS) {
					setTimeout(() => {
						// 安卓设备预估键盘高度
						const estimatedKeyboardHeight = this.systemInfo.windowHeight * 0.4;
						this.onKeyboardHeightChange({
							detail: {
								height: estimatedKeyboardHeight
							}
						});
					}, 100);
				}
			},
			// 处理输入框失去焦点
			handleInputBlur() {
				setTimeout(() => {
					this.onKeyboardHeightChange({
						detail: {
							height: 0
						}
					});
				}, 100);
			},
			handleScroll(e) {
				this.lastScrollTop = e.detail.scrollTop;
			},
			onKeyboardHeightChange(e) {
				this.keyboardHeight = e.detail.height;
				if (this.keyboardHeight > 0) {
					// 键盘弹出时，调整滚动区域高度
					this.scrollViewHeight = this.systemInfo.windowHeight - this.keyboardHeight - 220;
					// 滚动到底部
					setTimeout(() => {
						this.scrollTop = 999999;
					}, 100);
				} else {
					// 键盘收起时
					this.scrollViewHeight = this.commentPopupHeight - 220;
				}
			},
		},
	}
</script>

<style lang="less">
	.lt-list {

		.lt-content {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;

			&.lt-content-idmypublish {
				padding: 0;

				.row {
					padding: 40rpx 20rpx;
					background-color: #FFF7EE;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
				}

			}
		}
	}

	.row {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 40rpx 0;

		// &:last-child {
		// 	&::after {
		// 		display: none;
		// 	}
		// }

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;

				.head {
					position: relative;
					// 头像

					.profilephoto {
						width: 100rpx;
						height: 100rpx;
						border: 2rpx solid #D8A561;
						border-radius: 100%;
					}

					.vip {
						width: 38rpx;
						height: 31rpx;
						position: absolute;
						right: -10rpx;
						top: 4rpx;
					}
				}

				.head-right {
					display: flex;
					flex-direction: column;

					.name {
						font-size: 36rpx;
						margin-left: 30rpx;
						color: #333;
						font-weight: bold;
					}

					.zt {
						margin-top: 20rpx;
						font-size: 30rpx;
						padding: 0 30rpx;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: bold;

					}

					.main {
						margin-top: 15rpx;
						padding: 0 30rpx;
						font-size: 28rpx;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;

						&.main-list {
							display: block;
							-webkit-box-orient: none;
							-webkit-line-clamp: none;
							overflow: visible;
							text-overflow: visible;
							white-space: normal;
						}
					}
				}

			}

			.right {
				.animate {
					font-size: 26rpx;
					color: #B8812F;
				}
			}
		}



		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.tag {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #AC6C17;
				padding: 15rpx 25rpx;
				background: #FFEFD9;
				border-radius: 10rpx;

				image {
					width: 26rpx;
					height: 20.79rpx;
					margin-right: 10rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.block {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #333;
					margin-left: 50rpx;

					uni-icons {
						margin-right: 8rpx;
					}
				}
			}


		}
	}

	.row-text {
		display: flex;
		padding: 12rpx 0;

		>text {
			font-size: 30rpx;
			color: #333;

			&:last-child {
				display: flex;
				flex: 1;
				color: #000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;

				text {
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 5rpx;
				}
			}
		}
	}

	.sxcp {
		display: flex;
		padding: 12rpx 0;

		.sxcp-left {
			font-size: 28rpx;
			color: #333;
		}

		.sxcp-right {
			position: relative;
			top: -4rpx;
			display: flex;
			flex: 1;
			align-items: center;
			flex-wrap: wrap;
			font-size: 28rpx;
			color: #000;

			.sxcp-block {
				width: 125rpx;
				text-align: center;
				font-size: 28rpx;
				background: #FFEFD9;
				padding: 10rpx;
				border-radius: 12rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				color: #AC6C17;
			}
		}
	}

	.comment-popup {
		z-index: 99999999;
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		max-height: 100vh;

		&.empty-list {
			height: auto !important;
			min-height: 280rpx;
		}

		.comment-list {
			flex: 1;
			padding: 30rpx;
			box-sizing: border-box;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			margin-bottom: 220rpx;

			.comment-item {
				display: flex;
				align-items: flex-start;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: #f5f5f5;
				}

				.content-wrap {
					flex: 1;

					.user-info {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.name {
							font-size: 28rpx;
							color: #222;
							font-weight: 600;
							margin-right: 16rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}

					.content1 {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
					}
				}
			}
		}

		.comment-input-wrap {
			position: absolute;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 20rpx;
			border-top: 1rpx solid #eee;
			z-index: 100000000;
			transition: bottom 0.3s;

			.comment-input {
				width: 100%;
				height: 120rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				padding: 20rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}

			.submit-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
				color: #fff;
				font-size: 36rpx;
				border-radius: 45rpx;
				margin: 0;
				padding: 0;

				&.submit-btn1 {
					margin-bottom: 80rpx;
				}
			}
		}
	}

	/deep/ .uni-popup {
		z-index: 99999999 !important;

		.uni-popup__mask {
			z-index: 99999998 !important;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.uni-popup__wrapper {
			z-index: 99999999 !important;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>